<template>
	<view class="content">
		<!-- 头部大分类 -->
		<scroll-view id="tab-bar" :scroll-x="true" :show-scrollbar="false" class="scroll-h">
			<view v-for="(tab,index) in topClasses" :id="tab.id" :key="tab.id" :data-current="index"
				class="uni-tab-item" @click="ontabtap">
				<text :class="tabIndex === index ? 'uni-tab-item-title-active' : ''"
					class="uni-tab-item-title">{{tab.name}}</text>
			</view>
		</scroll-view>
		<!-- 阅读时间统计 书籍编辑 -->
		<view class="">
			<view class="time"
				style="display: inline-flex;background-color: #f6f6f6;font-size: 8px;margin: 0 10px;padding: 5px;">
				<uni-icons size="17" style="margin-right: 5px;color: aquamarine;" type="color-filled"></uni-icons>
				已读{{readTime}}分钟 已听{{listenTime}}分钟
			</view>
			<view style="float: right;margin-right: 20px;font-size: 8px;padding-top: 5px;">
				<label for="">列表</label>
				<label style="margin: 0 10px;color: #f2f2f2;">|</label>
				<label for="">编辑</label>
			</view>
			<view class="">
				<scroll-view :scroll-x="true" :show-scrollbar="false" class="condition-list"
					style="display: inline-block;">
					<view v-for="(tab,index) in conditionList" :key="index" :class="conditionTabIndex === index ? 'condition-list-active' : ''"
					:data-current="index"
						class="condition-list-item" @click="onConditionTab">
						{{tab.name}}
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 书架 -->
		<view style="margin: 0px 15px;">
			<!-- 书籍 -->
			<view v-for="item,index in books"
				:key="index" style="width: 33%;display:inline-block;margin-top: 20px;text-align: center;" @click="gotoBook(item)">
				<u--image :showLoading="true" :src="getFullImg(item)" height="270rpx" style="border-radius: 7px;" width="180rpx"
				@click="click" ></u--image>
				<view class="bookName" style="text-align: center;align-items: center;">{{item.bookName}}</view>
				<view style="font-size: 10px;color: #b7b7b7;margin-top: 3px;">
					<view v-if="item.read < 1">{{item.chapterCnt}}章未读</view>
					<view v-if="item.read > 1 && item.read < item.chapterCnt">
						{{item.read}}/{{item.chapterCnt}}
					</view>
					<view v-if="item.read >= item.chapterCnt">已读完</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as request from '@/api/request';
	export default {
		data() {
			return {
				tabIndex: 0,
				// 顶部菜单栏
				topClasses: [{
					id: 1,
					name: "书架"
				}, {
					id: 2,
					name: "历史"
				}, {
					id: 3,
					name: "圈子"
				}],
				// 阅读时间
				readTime: 220,
				listenTime: 230,
				conditionTabIndex: 0,
				conditionList: [{
					id: 0,
					name: "全部"
				}, {
					id: 2,
					name: "出版"
				}, {
					id: 3,
					name: "完结"
				}, {
					id: 4,
					name: "连载"
				}],
				books: [{
					id: 1,
					url: "https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg",
					name: "平凡的世界",
					readChapter: 0,
					chapter: 27
				}],
				// 当前查看书籍
				currBook: {}

			}
		},
		created() {
			this.getMyBooks();
		},
		methods: {
			// 获取图书信息
			getMyBooks(){
				request.get("/business/bookshelf/list/1",{})
					.then((res) => {
						this.books = res.data.shelf;
					}, (err) => {
						console.error(err)
						uni.showToast({
							title: "数据加载失败",
							icon: 'error'
						})
					})
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index
			},
			onConditionTab(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				if (this.conditionTabIndex === index) {
					return;
				}
				this.conditionTabIndex = index
			},
			// 去图书信息页面
			gotoBook(book){
				uni.showToast({
					title: book.name,
					success() {
						
					}
				})
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '/pages/book/book?id='+book.id
				});
			},
			// 拼接访问路径
			getFullImg(item){
				return request.config_url+ "/profile/novel/" + item.img;
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		margin: 0;
		width: 100%;
	}
	.scroll-h {
		white-space: nowrap;
		width: 100%;

		.uni-tab-item {
			width: 90rpx;
			height: 40rpx;
			display: inline-flex;
			margin-left: 20rpx;
			margin-bottom: 50rpx;
		}
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 30rpx;
		font-weight: 1000;
		height: 80rpx;
		line-height: 80rpx;
		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #010000;
		font-size: 40rpx;
		font-weight: 700;
	}

	// 时间/编辑
	.time {
		border-radius: 5px;
	}

	.condition-list {
		background-color: #ffffff;
		white-space: nowrap;
		width: 100%;
		margin: 20px 5px;

		.condition-list-item {
			border-radius: 5px;
			width: 60rpx;
			height: 40rpx;
			background-color: #f7f7f7;
			display: inline-flex;
			margin: 0rpx 10rpx;
			padding: 5rpx 20rpx;
		}

		.condition-list-active {
			color: #ec6427;
			background-color: #feefe8;
		}


	}
	// 书名
	.bookName{
		font-size: 13px;
		color: black;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>